<template>
  <div style="margin-left: 6vw;margin-right: 6vw">
    <div class="right-title">登录</div>
    <el-form :model="form" :rules="rules" ref="form" size="large">
      <el-form-item style="margin-bottom: 5vh" prop="email">
        <el-input v-model="form.email" placeholder="邮箱" :prefix-icon="Message"/>
      </el-form-item>
      <el-form-item style="margin-bottom: 5vh" prop="user_password">
        <el-input v-model="form.user_password" placeholder="密码" :prefix-icon="Lock" type="user_password" show-password/>
      </el-form-item>
      <el-form-item>
        <el-button style="width: 100%" type="primary" @click="handleSubmit">登录</el-button>
      </el-form-item>
      <div class="right-divider"></div> <!-- 分割线 -->
      <el-button link @click="this.$emit('changeType',1)">注册</el-button>
      <el-button style="float: right" link @click="this.$emit('changeType',2)">忘记密码</el-button>
    </el-form>
  </div>
</template>

<script>
import {Message, Lock} from "@element-plus/icons-vue";
import Request from "@/util/request";
import * as url from "url";
export default {
  name: "LoginView",
  data() {
    return {
      //图标
      Lock,
      Message,

      //表单
      form: {
        email: '',
        user_password: '',
      },

      //规则验证
      rules: {
        email: [
          {required: true, message: "请输入你的邮箱", trigger: "blur"},
          {
            required: true,
            validator: this.checkEmail,
            message: "邮箱格式错误",
            trigger: "change",
          }
        ],
        user_password: [
          {required: true, message: "请输入密码", trigger: "blur"},
          {required: true, min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur'}
        ],
      },
    }
  },
  methods: {
    //邮箱格式验证
    checkEmail(rule, value, callback) {
      // 验证邮箱的正则表达式
      const regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      if (regEmail.test(value)) {
        this.isCaptchaButtonDisabled = false;
        // 合法的邮箱
        return callback();
      }
      this.isCaptchaButtonDisabled = true
      callback(new Error("请输入合法的邮箱"));
    },
    //登录
    handleSubmit() {
      // 执行表单提交逻辑，发送请求到服务器
      this.$refs["form"].validate(valid => {
        if (valid) {
          Request.post(url + "/login", this.form).then(res => {
            if (res.code === "1") {
              this.$message({
                type: "success",
                message: res.message
              })
              this.$router.push("/console") //页面跳转
            } else {
              this.$message({
                type: "error",
                message: res.message
              })
            }
          })
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>


.right-title {
  margin-top: 13vh;
  margin-bottom: 5vh;
  display: flex;
  font-size: 2vw;
  justify-content: center; /* 水平居中 */
}

.right-divider {
  height: 1px; /* 分割线的高度 */
  background-color: #c5ccdb; /* 分割线的颜色 */
  transform: translateY(-50%); /* 将分割线垂直居中 */
}
</style>